<template>
	<div>
		<!-- 头部 start-->
		<div class="circle">
			<div class="circle_details">
					<i class="circle_details_down"></i>
					<span class="circle_details_str">圈子正文</span>
			</div>
		</div>
		<!-- 头部 end-->
		
		<!-- 圈子正文的内容-->
		<div class="circle_details_content">
		<div class="circle_details_content_str">
			<ul>
				<li class="clearfix">
					<div class="circle_details_content_left">
						<img :src="circle_overall[0].avatar" />
					</div>
					
					<div class="circle_details_content_all">
						<div class="circle_details_content_right">
							<div class="circle_details_content_top">
								<span class="name">{{circle_overall[0].name}}</span>
								<p class="time">{{circle_overall[0].time}}&emsp;{{circle_overall[0].place}}</p>
							</div>
						</div>
						<div class="circle_details_content_zright">
								<i></i>
								<span>{{circle_overall[0].praise}}</span>
						</div>
					</div>
					<div class="circle_details_content_all_down">
						<span>{{circle_overall[0].content}}</span>
						<img v-for="content_img in circle_overall[0].content_img" :src="content_img" />
					</div>
					<div >
						<div class="circle_details_content_bottom_left">
						<span>删除此文</span>
					</div>
					<div class="circle_details_content_bottom_right">
						<img src="../../../static/images/25/f-2.png"/>
						<span>分享</span>
					</div>
					</div>
				</li>
			</ul>
			<!-- 精彩评论 start-->
			<div class="circle_details_comment">
				<div class="details_comment">
					<span class="wonderful">精彩评论</span>
				</div>
			</div>
			
			<ul>
				<li class="clearfix">
					<div class="circle_details_content_left">
						<img :src="circle_overall[0].avatar" />
					</div>
					
					<div class="circle_details_content_all">
						<div class="circle_details_content_right">
							<div class="circle_details_content_top">
								<span class="name">脑残上大号</span>
								<p class="time">1楼&emsp;2015-03-22</p>
							</div>
						</div>
						<div class="circle_details_content_zright">
							<i></i>
							<span>5</span>
						</div>
					</div>
					<div class="circle_details_text">
						<span>啦啦啦！我们就是喜欢，一直支持，不管别人怎么说！</span>
					</div>
					<div class="circle_details_position">
						<span>崇文门国瑞城</span>
					</div>
					<div class="circle_details_position_right">
						<span>删除</span>
					</div>
				</li>
			</ul>
			<!-- 精彩评论 end-->
			
			<!-- 全部评论 start-->
			<div class="circle_details_comment">
				<div class="details_comment">
					<span class="wonderful">全部评论</span>
				</div>
			</div>
			
			<ul>
				<li v-for="data in circle_details" class="clearfix">
					<div class="circle_details_content_left">
						<img :src="circle_overall[0].avatar" />
					</div>
					
					<div class="circle_details_content_all">
						<div class="circle_details_content_right">
							<div class="circle_details_content_top">
								<span class="name">{{data.name}}</span>
								<p class="time">{{data.floor}}&emsp;{{data.time}}</p>
							</div>
						</div>
						<div class="circle_details_content_zright">
								<i></i>
								<span>{{data.praise}}</span>
						</div>
					</div>
					<div class="circle_details_text">
						<span>{{data.content}}</span>
					</div>
					<div class="circle_details_position">
						<span>{{data.site}}</span>
					</div>
					<div class="circle_details_position_right">
						<span>删除</span>
					</div>
				</li>
			</ul>
			<!-- 全部评论 end-->
			
			<!-- 发表评论  start-->
			<div class="circle_details_published">
				<div class="icon"></div>
				<input type="text" placeholder="请输入评论内容..." />
			</div>
			<!-- 发表评论  end-->
		</div>
	</div>
	
	</div>
</template>

<script>
	
	export default {
		
		name:'circle_details',
		
		data(){
			
			return {
				
				circle_overall:[
					
					{
						id:1,
						avatar:'http://img1.imgtn.bdimg.com/it/u=3875623467,1009469486&fm=26&gp=0.jpg',
						name:'脑残粉',
						time:'刚刚',
						place:'三里屯SOHO',
						praise:parseInt(Math.random() * 1000),
						stamp:parseInt(Math.random() * 1000),
						content:'我是偶然一次在电视上看到唱我们脑残，就的痴迷的爱上他们了，随便别人怎么说我都会一直爱下去！！',
						content_img:[
						'http://www.cdhdky.com/images/ttt.jpg',
						'http://www.cdhdky.com/images/5rrrrrrr123.jpg',
						'http://www.cdhdky.com/images/5rrrrrrr123.jpg',
						]
					}
					
				],
				circle_details:[
					{
						name:'脑残上大号',
						floor:Math.floor(Math.random() * 100) + '楼',
						time:new Date().toLocaleDateString().replace(/\//g,'-'),
						praise:parseInt(Math.random() * 100),
						content:'啦啦啦！我们就是喜欢，一直支持，不管别人怎么说！',
						site:'崇文门国瑞城'
					},
					{
						name:'脑残上小号',
						floor:Math.floor(Math.random() * 100) + '楼',
						time:new Date().toLocaleDateString().replace(/\//g,'-'),
						praise:parseInt(Math.random() * 100),
						content:'爱怎怎地！我们吃屎也好，就是爱他们！我们就这样了~~~~',
						site:'崇文门国瑞城'
					},
				]
				
			}
			
		}
		
	}
</script>

<style lang="less" scoped>
table{ border-collapse: collapse; border-spacing: 0; }
body,p,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 { margin: 0; }
input,textarea,select { padding: 0; border: 1px solid #ccc;outline: 0; font-size: 100%; }
i{ font-style: normal; }
b{ font-weight: normal; }
input{ text-indent: 2em; }
ul,ol{ padding-left: 0; list-style: none; }
a{ text-decoration: none; }
a,img{ -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.clearfix:after { content: ""; display: block; height: 0; overflow: hidden; clear: both; }
body{ font-family: "微软雅黑"; font-size:16px; }

/* 精彩评论 start */
.details_comment{
    .wonderful:before{
        content: "";
        display: inline-block;
        width:3/64rem;
        height:26/64rem;
        margin-bottom:-3/64rem;
        margin-right:5/64rem;
        background-color: #A54BE8;
    }
    .wonderful{
        font-size:26/64rem;
    }
    .wonderful:after{
        content: "";
        display: inline-block;
        width:(600-120) /64rem;
        height:1/64rem;
        margin-bottom:10 /64rem;
        margin-left:8/64rem;
        background-color: #D7D2E0;
    }
}
.circle_details_text{
    margin:(64 + 20)/64rem 0 34/64rem;
    margin-left:(60+20) / 64rem;
    span{
        display: inline-block;
        font-size:30/64rem;
    }
}
.circle_details_position{
    margin-left:(60+20) / 64rem;
    float:left;
    margin-bottom:20/64rem;
    span{
        font-size:26/64rem;
        color:#959595;
    }
}
.circle_details_position_right{
    float: right;
    font-size:26/64rem;
    color:#c79bef;
}
/* 精彩评论 end */

/* 发表评论 start */
.circle_details_published{
    padding:10/64rem 0;
    .icon{
        float: left;
        width:80/64rem;
        height:60/64rem;
        background: #fff url(../../../static/images/25/下部-输入icon.png) center no-repeat;
        border-top-left-radius: 10/64rem;
        border-bottom-left-radius: 10/64rem;
        border:1px solid #ccc;
        border-right:0;
        background-size: 33/64rem 33/64rem;
    }
    input{
        width:510/64rem;
        height:60/64rem;
        border-top-right-radius: 10/64rem;
        border-bottom-right-radius: 10/64rem;
        text-indent:0;
        border-left:0;
        font-size:26/64rem;
        color:#817E87;
    }
}
/* 发表评论   end*/

/* 头部样式 start */
.circle{
    background: #A54BE8;
    .circle_details{
        width:600/64rem;
        margin:0 auto;
        height:95/64rem;
        text-align:center;
        line-height:95/64rem;
        /*padding-top:35px;*/
        .circle_details_str{
            font-size:35/64rem;
            color:#fff;
        }
        .circle_details_down{
            float:left;
            display:inline-block;
            background: url("../../../static/images/25/circle_ljt.png") center bottom no-repeat;
            background-size:100%;
            vertical-align: middle;
            width:33/64rem;
            height:75/64rem;
            line-height:50/64rem;
        }
    }
}
/* 头部样式 end */

/* 内容详情 start */
.circle_details_content{
    background: rgb(242,238,249);
    .circle_details_content_str{
        width:600/64rem;
        margin:0 auto;
        li{
            padding-top:25/64rem;
            border-bottom:1px solid rgb(215,210,224);
        }
    }
}
.circle_details_content_all{
    float:left;
    margin-left:20px;
    width:(600-60-20) / 64rem;
}
.circle_details_content_left{
    float:left;
    img{
        width:60/64rem;
        height:60/64rem;
        border-radius:50%;
    }
}
.circle_details_content_right{
    /*width:400/64rem;*/
    float: left;
    .circle_details_content_top{
        .name{
            font-size:26/64rem;
            color:#B676EB;
        }
        .time{
            color:#959595;
            font-size: 22/64rem;
        }
    }
}
.circle_details_content_zright{
    float: right;
    height:64/64rem;
    line-height:64/64rem;
    text-align:center;
    i{
        width:36/64rem;
        height:36/64rem;
        display: inline-block;
        vertical-align: middle;
        background: url(../../../static/images/23/circle_zan_btn_normal.png) no-repeat 1px;
    }
    span{
        padding-left:5px;
        font-size:22/64rem;
        color: #959595;
        vertical-align: middle;
    }
}
.circle_details_content_all_down{
    margin:(64 + 20)/64rem 0 22/64rem;
    margin-left:(60+20) / 64rem;
    span{
        display: inline-block;
        font-size:30/64rem;
        margin-bottom:22/64rem;
    }
    img{
        width:150/64rem;
        height:150/64rem;
        margin-right:18/64rem;
    }
}
.circle_details_content_bottom_left{
    height:82/64rem;
    line-height:82/64rem;
    margin-left:(60+20) / 64rem;
    float:left;
    span{
        color:#c79bef;
        font-size:24/64rem;
    }
}
.circle_details_content_bottom_right{
    width:100/64rem;
    line-height:80/64rem;
    float:right;
    img{
        vertical-align: middle;
        padding-right:10/64rem;
    }
    span{
        vertical-align: middle;
        color: #B676EB;
        font-size:24/64rem;
    }
}
/* 内容详情 end */
</style>